<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>答题页面</title>

    <link rel="stylesheet" href="../../static/layui-main/dist/css/layui.css">
    <script src="../../static/layui-main/src/layui.js"></script>
    <style>

        .top-div {
            padding-top: 100px;
            background-color: rgba(234, 245, 255, 0.96);
        }

        .top-div-d {
            width: 85%;
            padding: 30px 30px 0px 30px;
            margin: 0 auto;
            text-align: center;
            background-color: rgba(255, 255, 255, .7);
        }

        .top-div-h {
            padding: 5px;
            font-weight: bolder
        }

        .top-div-p {
            margin: 5px 0px 0px 0px;
            color: #a9a9aa;
        }

        .mid-div {
            padding: 40px;
            background-color: white;
            /*text-align: center;*/
            margin: 0 auto;
        }

        .mid-list {
            width: 50%;
            padding: 20px;
            border-radius: 8px;
            box-shadow: #cacaca 0px 0px 10px;
            margin: 0 auto;
        }

        .mid-question {
            margin-top: 10px;
            display: none;
        }

        .mid-topic {
            margin: 8px 0;
            color: #41464b;
            font-size: 17px;
        }

        .mid-option {
            margin: 10px 0;
            padding: 5px;
            border-radius: 8px;
            text-align: left;
            color: #41464b;
            background-color: #e2ecf6;
        }

        .bottom-div{
            margin: 0 auto;
            width: 50%;
            padding-top: 10px;
            text-align: center;
        }
        .bottom-btn-left{
            float: left;
        }
        .bottom-btn-right{
            float: right;
        }
        .bottom-submit{
            display: none;
        }

        #id_1 {
            display: block;
        }

        @media screen and (max-device-width: 1000px) {
            .top-div {
                padding-top: 50px;
            }

            .mid-list {
                width: 90%;
            }
            .mid-div {
                padding: 20px;
                /*background-color: white;*/
                /*text-align: center;*/
            }
            .bottom-div{
                width: 90%;
            }
        }

    </style>

</head>
<body>
<!--性格色彩框，边距40，透明白色-->
<div class="top-div">
    <div class="top-div-d">
        <h1 class="top-div-h">FPA性格色彩测试</h1>
        <p class="top-div-p">完成测试，获得专业的分析报告</p>
    </div>
</div>
<!--问题大div,上下padding-->
<div class="mid-div">
    <!--  进度条加问题选项  -->
    <div class="mid-list">
        <!--    进度条    -->
        <div class="layui-progress layui-progress-big" lay-showPercent="yes" lay-filter="demo">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="1%"></div>
        </div>
        <!--  问题  -->
        <input id="testerId" type="hidden" value="472">
        <input id="questionsLen" type="hidden" value="30">
        <div>
            <div class="mid-question" id="id_1">
                <label class="mid-topic">1、我的人生观是</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_1" name="1"
                                   value="A" title="A人生的体验越多越好，所以想法很多，有可能就应该多尝试。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_1" name="1"
                                   value="B" title="B深度比宽度更重要，目标要谨慎，一旦确定就坚持到底。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_1" name="1"
                                   value="C" title="C人生必须有所成。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_1" name="1"
                                   value="D" title="D没必要太辛苦，好好活着就行。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_2">
                <label class="mid-topic">2、如果野外旅行，在下山返回的路线上，我更在乎：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_2" name="2"
                                   value="A" title="A要好玩有趣，不愿重复，所以宁愿走新路线。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_2" name="2"
                                   value="B" title="B要安全稳妥，担心危险，所以宁愿走原路线。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_2" name="2"
                                   value="C" title="C要挑战自我，喜欢冒险，所以宁愿走新路线。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_2" name="2"
                                   value="D" title="D要方便省心，害怕麻烦，所以宁愿走原路线。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_3">
                <label class="mid-topic">3、在表达一件事情上，别人认为我：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_3" name="3"
                                   value="A" title="A总是给人感受到强烈印象。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_3" name="3"
                                   value="B" title="B总是表述极其准确。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_3" name="3"
                                   value="C" title="C总能围绕最终目的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_3" name="3"
                                   value="D" title="D总能让大家很舒服。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_4">
                <label class="mid-topic">4、在生命多数时候，我其实更希望：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_4" name="4"
                                   value="A" title="A刺激。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_4" name="4"
                                   value="B" title="B安全。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_4" name="4"
                                   value="C" title="C挑战。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_4" name="4"
                                   value="D" title="D稳定。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_5">
                <label class="mid-topic">5、我认为自己在情感上的基本特点是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_5" name="5"
                                   value="A" title="A情绪多变，情绪波动大。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_5" name="5"
                                   value="B" title="B外表抑制强，但内心起伏大，一旦挫伤难以平复。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_5" name="5"
                                   value="C" title="C感情不拖泥带水，较直接。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_5" name="5"
                                   value="D" title="D天性四平八稳。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_6">
                <label class="mid-topic">6、我认为自己除了工作以外，在人生的控制欲上，我：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_6" name="6"
                                   value="A" title="A谈不上控制欲，却有强烈地感染带动他人的欲望，但自控能力不强。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_6" name="6"
                                   value="B" title="B用规则来保持我的自控和对他人的要求。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_6" name="6"
                                   value="C" title="C内心有控制欲，希望别人服从我。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_6" name="6"
                                   value="D" title="D从不愿去管别人，也不愿别人来管我。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_7">
                <label class="mid-topic">7、当与情人交往时，我倾向于：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_7" name="7"
                                   value="A" title="A在一起时就要尽情地欢乐，爱意常会溢于言表。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_7" name="7"
                                   value="B" title="B体贴入微关怀细腻，于对方的需求和变化极其敏感。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_7" name="7"
                                   value="C" title="C帮助对方成长是我最大的责任。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_7" name="7"
                                   value="D" title="D迁就顺从的陪伴者和绝佳的聆听着。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_8">
                <label class="mid-topic">8、在人际交往时，我：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_8" name="8"
                                   value="A" title="A心态开放，可快速建立起人际关系。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_8" name="8"
                                   value="B" title="B非常审慎缓慢地深入，一旦认为是朋友便会长久。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_8" name="8"
                                   value="C" title="C希望在人际关系中占据主导地位。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_8" name="8"
                                   value="D" title="D顺其自然，不温不火，相对被动。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_9">
                <label class="mid-topic">9、我认为自己的为人：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_9" name="9"
                                   value="A" title="A可爱而生机。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_9" name="9"
                                   value="B" title="B深沉而内敛。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_9" name="9"
                                   value="C" title="C果断而自信。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_9" name="9"
                                   value="D" title="D平静而和气。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_10">
                <label class="mid-topic">10、我完成任务的方式是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_10" name="10"
                                   value="A" title="A常赶在最后期限前的一刻完成。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_10" name="10"
                                   value="B" title="B自己精确地做，不麻烦别人。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_10" name="10"
                                   value="C" title="C最快速做完，再找下一个任务。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_10" name="10"
                                   value="D" title="D该怎么做就怎么做，需要时从他人处得到帮忙。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_11">
                <label class="mid-topic">11、如果有人深深惹恼我，我：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_11" name="11"
                                   value="A" title="A内心手上，当时认为不可能原谅，但最终常会原谅对方。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_11" name="11"
                                   value="B" title="B如此之深的愤怒无法忘记，同时未来避开那个家伙。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_11" name="11"
                                   value="C" title="C每个人都要为他的错误付出相应的代价，内心期望有机会要狠狠的回应。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_11" name="11"
                                   value="D" title="D尽量不摊牌，因为还不到那个地步。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_12">
                <label class="mid-topic">12、在人际关系中，我最在意的是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_12" name="12"
                                   value="A" title="A欢迎。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_12" name="12"
                                   value="B" title="B理解。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_12" name="12"
                                   value="C" title="C尊敬。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_12" name="12"
                                   value="D" title="D接纳。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_13">
                <label class="mid-topic">13、在工作上，我表现出更多的是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_13" name="13"
                                   value="A" title="A热忱，有很多想法且很多灵性。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_13" name="13"
                                   value="B" title="B完美精准且承诺可靠。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_13" name="13"
                                   value="C" title="C坚强而有推动力。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_13" name="13"
                                   value="D" title="D有耐心且适应性强。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_14">
                <label class="mid-topic">14、我过往的老师最有可能对我的评价是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_14" name="14"
                                   value="A" title="A善于表达和抒发情感。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_14" name="14"
                                   value="B" title="B严格保护自己的私密，有时会显得孤独或不合群。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_14" name="14"
                                   value="C" title="C动作敏捷独立，且喜欢自己做事情。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_14" name="14"
                                   value="D" title="D反应度偏低，比较温和。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_15">
                <label class="mid-topic">15、朋友对我的评价最有可能的是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_15" name="15"
                                   value="A" title="A喜欢对朋友倾诉事情，是开心果。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_15" name="15"
                                   value="B" title="B能提出很多问题，且需要许多精细的解说。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_15" name="15"
                                   value="C" title="C解决问题的高手。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_15" name="15"
                                   value="D" title="D总能多听少说。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_16">
                <label class="mid-topic">16、在帮助他人的问题上，我倾向于：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_16" name="16"
                                   value="A" title="A我不主动，但若他来找我，那我一定帮。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_16" name="16"
                                   value="B" title="B值得帮助的人就帮。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_16" name="16"
                                   value="C" title="C无关者何必帮，但我若承诺，必完成。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_16" name="16"
                                   value="D" title="D虽无英雄打虎胆，常有自告奋勇心。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_17">
                <label class="mid-topic">17、面对他人对自己的赞美，我的本能反应是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_17" name="17"
                                   value="A" title="A没有赞美也无所谓，得到了也不至于欣喜。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_17" name="17"
                                   value="B" title="B我无须那些没用的赞美，宁可他们欣赏我的能力。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_17" name="17"
                                   value="C" title="C有点怀疑对方是否认真或立即回避很多人的关注。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_17" name="17"
                                   value="D" title="D能得到赞美，总归是一件令人愉悦的事。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_18">
                <label class="mid-topic">18、面对生活的现状，我更倾向于：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_18" name="18"
                                   value="A" title="A外面怎样与我无关，我觉得自己这样还行。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_18" name="18"
                                   value="B" title="B这个世界如果我不进步，别人就会进步，所以我需要不停地前进。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_18" name="18"
                                   value="C" title="C在所有的问题未发生前，就该尽量想好所有的可能性。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_18" name="18"
                                   value="D" title="D每天的生活，只要开心快乐最重要。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_19">
                <label class="mid-topic">19、对于规则，我内心的态度是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_19" name="19"
                                   value="A" title="A不愿违反规则，但可能因为松散而无法达到规则要求。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_19" name="19"
                                   value="B" title="B打破规则，希望由自己来制定规则，而不是遵守规则。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_19" name="19"
                                   value="C" title="C严格遵守规则，且竭尽全力做到规则内的最好。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_19" name="19"
                                   value="D" title="D不喜欢被规则束缚，不按规则出牌，会觉得新鲜有趣。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_20">
                <label class="mid-topic">20、我认为自己做事上：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_20" name="20"
                                   value="A" title="A慢条斯理，按部就班，能与周围协调一致。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_20" name="20"
                                   value="B" title="B目标明确，集中精力为实现目标而努力，善于抓住核心。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_20" name="20"
                                   value="C" title="C慎重小心，为做好预防及善后，会尽心操劳。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_20" name="20"
                                   value="D" title="D丰富跃动，灵活反应。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_21">
                <label class="mid-topic">21、在面对压力时，我比较倾向于选用：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_21" name="21"
                                   value="A" title="A眼不见为净。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_21" name="21"
                                   value="B" title="B压力越大，抵抗力越大。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_21" name="21"
                                   value="C" title="C在自己的内心慢慢地咀嚼消化压力。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_21" name="21"
                                   value="D" title="D本能地回避压力，避不掉就用各种方法发泄出去。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_22">
                <label class="mid-topic">22、当结束一段刻骨铭心的感情时，我会：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_22" name="22"
                                   value="A" title="A日子总要过，时间会冲淡一切。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_22" name="22"
                                   value="B" title="B虽然受伤，但一旦下定决心，就会努力把过去的影子甩掉。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_22" name="22"
                                   value="C" title="C深陷悲伤，在相当长的时间里难以自拔，也不愿再接受新的人。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_22" name="22"
                                   value="D" title="D痛不欲生，需要找朋友倾诉，寻求化解之道。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_23">
                <label class="mid-topic">23、面对他人的痛苦倾诉，我回顾自己大多数时候本能上倾?</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_23" name="23"
                                   value="A" title="A静静地听，认同对方的感受。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_23" name="23"
                                   value="B" title="B作出判断，痛苦没用，要帮助对方解决问题。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_23" name="23"
                                   value="C" title="C给予分析，帮助他分析，安抚他的情绪。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_23" name="23"
                                   value="D" title="D发表自己的评论意见，与对方的情绪共起落。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_24">
                <label class="mid-topic">24、我在以下哪个群体中较感满足？</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_24" name="24"
                                   value="A" title="A能心平气和，只要大家达成一致。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_24" name="24"
                                   value="B" title="B能简单扼要有结果地彼此展开充分的辩论。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_24" name="24"
                                   value="C" title="C能就一件事有规则、有条理、有步骤、有章法地详细讨论。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_24" name="24"
                                   value="D" title="D能随意无拘束地、开心地自由谈话。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_25">
                <label class="mid-topic">25、我觉得工作：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_25" name="25"
                                   value="A" title="A最好没有压力，让我做我熟悉的工作就不错。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_25" name="25"
                                   value="B" title="B是达成人生目标和成就最重要的途径。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_25" name="25"
                                   value="C" title="C要么不做，要做就做到最好。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_25" name="25"
                                   value="D" title="D如果能将乐趣融合在工作中就太棒了，如果是不喜欢的工作就实在没劲。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_26">
                <label class="mid-topic">26、如果我是领导，我内心更希望在部属的心目中，我是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_26" name="26"
                                   value="A" title="A可以亲近的和善于为他们着想的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_26" name="26"
                                   value="B" title="B有很强的能力和富有领导力的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_26" name="26"
                                   value="C" title="C公平公正且足以信赖的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_26" name="26"
                                   value="D" title="D被他们喜欢并且觉得富有感召力的。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_27">
                <label class="mid-topic">27、我希望得到的认同方式是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_27" name="27"
                                   value="A" title="A有无认同都不要影响我。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_27" name="27"
                                   value="B" title="B精英的认同最重要。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_27" name="27"
                                   value="C" title="C我认同的人或我在乎的人认同即可。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_27" name="27"
                                   value="D" title="D希望大家都能认同我。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_28">
                <label class="mid-topic">28、当我还是个孩子时，我：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_28" name="28"
                                   value="A" title="A不太会积极尝试新事物，通常比较喜欢旧有的和熟悉的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_28" name="28"
                                   value="B" title="B是孩子王，大家经常听我的决定。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_28" name="28"
                                   value="C" title="C害羞见生人，有意识地回避。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_28" name="28"
                                   value="D" title="D调皮可爱，在大部分的情况下是多动且热心的。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_29">
                <label class="mid-topic">29、如果我是父母，我也许是：</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_29" name="29"
                                   value="A" title="A不愿干涉子女或易被说动的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_29" name="29"
                                   value="B" title="B严厉的或直接给予方向指点的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_29" name="29"
                                   value="C" title="C用行动代替语言来表示关爱或高要求的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_29" name="29"
                                   value="D" title="D愿意陪孩子一起玩，孩子的朋友们所喜欢和欢迎的。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
        <div>
            <div class="mid-question" id="id_30">
                <label class="mid-topic">30、以下有四组格言，哪组里符合我感觉的数目最多？</label>
                <form class="layui-form">
                    <div class="layui-form-item">
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="A_30" name="30"
                                   value="A" title="A最深刻的真理是最简单和最平凡的。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="B_30" name="30"
                                   value="B" title="B走自己的路，让人家去说吧。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="C_30" name="30"
                                   value="C" title="C一个不注意小事的人，永远不会成就大事。">
                        </div>
                        <div class="layui-input-block mid-option">
                            <input type="radio" lay-filter="qso"
                                   id="D_30" name="30"
                                   value="D" title="D与其在死的时候握着一大把钱，还不如活时活得丰富多彩。">
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="bottom-div">
        <button id="pre_btn" type="button" class="layui-btn  layui-bg-blue bottom-btn-left">
            <i class="layui-icon layui-icon-left"></i>
        </button>
        <button id="submit_btn"  type="submit" class="layui-btn  layui-btn-warm layui-btn-radius bottom-submit">提交</button>
        <button id="next_btn"  type="button" class="layui-btn  layui-bg-blue bottom-btn-right">
            <i class="layui-icon layui-icon-right"></i>
        </button>
    </div>
</div>


<script>
    var type=null;
    layui.use(['layer', 'element', 'form', 'jquery'], function () {
        var $ = layui.jquery,
            layer = layui.layer,
            element = layui.element,
            form = layui.form;

        var resultList = [];
        var questionsLen = $("#questionsLen").val();
        var index=0;

        form.on('radio(qso)', function (data) {
            //定义一个result对象
            var result = new Object();
            //获取测试者id
            result.testerId=$("#testerId").val();
            //获取测试题id
            result.questionId=data.elem.name;
            //获取答案
            result.answer=data.value;
            //获取题目编号（1-30）
            index=parseInt(data.elem.id.split("_")[1]);
            //添加答案到resultList
            if (index<=resultList.length){
                resultList[index-1] = result;
            }else {
                resultList.push(result);
            }
            if(resultList.length==questionsLen){
                $('#submit_btn').show();
            }else {
                if (index!=questionsLen){
                    //隐藏当前的题目
                    $('#id_'+index).hide();
                    //显示下一题目
                    $('#id_'+(index+1)).show();
                }
            }
            //计算进度条
            element.progress('demo', Math.ceil(index/30*100)+'%');
        });

        $('#pre_btn').on('click',function () {
            if (resultList.length!=questionsLen){//没做完时
                if (index>0){
                    $('#id_'+(index+1)).hide();
                    $('#id_'+index).show();
                    index--;
                }
            }else {//做完时
                if (index>1){
                    $('#id_'+index).hide();
                    $('#id_'+(index-1)).show();
                    index--;
                }
            }

        });
        $('#next_btn').on('click',function () {
            if (resultList.length!=questionsLen){//没做完时
                if (index<resultList.length){
                    index++;
                    $('#id_'+index).hide();
                    $('#id_'+(index+1)).show();
                }
            }else {//做完时
                if (index<questionsLen){
                    $('#id_'+index).hide();
                    $('#id_'+(index+1)).show();
                    index++;
                }
            }
        });
        $('#submit_btn').on('click',function () {
            var resultListJson = JSON.stringify(resultList);
            if(resultList.length==questionsLen){
                //发送ajax请求到后端
                $.ajax({
                    url:"/testResult/saveBatchTestResult",
                    type: "POST",
                    dataType:"JSON",
                    contentType:"application/json;charset=UTF-8",
                    data:resultListJson,
                    success:function (ret) {
                        if(ret.code==0){
                            if(type==1){
                                window.location.href="/test/toSuccess";
                            }else {
                                window.location.href="/test/toResult?id="+$("#testerId").val();
                            }

                        }else
                        {
                            layer.msg(ret.msg,{icon: 5});
                        }

                    }
                })
            }else {
                alert("请做完后在提交");
            }
        });

    });
</script>

</body>
</html>
